import React, { Fragment } from 'react';
import { formatMessage } from 'umi/locale';
import Link from 'umi/link';
import QueueAnim from 'rc-queue-anim';
import { TransitionGroup, CSSTransition } from "react-transition-group";
import classNames from 'classnames';
import Texty from 'rc-texty';
import 'rc-texty/assets/index.css';
import { Icon } from 'antd';
import DocumentTitle from 'react-document-title';
import { GlobalFooter } from 'ant-design-pro';
import SelectLang from '@/components/SelectLang';
import { links, copyright } from '@/commons/globalFooter';
import 'rc-texty/assets/index.css';
import styles from './UserLayout.less';

const COPYRIGHT = (
  <Fragment>
    Copyright <Icon type="copyright" />{copyright}
  </Fragment>
);

class UserLayout extends React.PureComponent {
  // @TODO title
  getPageTitle() {
    const { routerData = {}, location } = this.props;
    const { pathname } = location;
    let title = TITLE;
    if (routerData[pathname] && routerData[pathname].name) {
      title = `${routerData[pathname].name} - ${TITLE}`;
    }
    return '登入 - ' + title;
  }

  render() {
    const { location, children } = this.props;
    return (
      <TransitionGroup className="transition-group">
        <CSSTransition key={location.pathname === '/user' ? '/user/signin' : location.pathname} classNames="fade" timeout={300}>
          <DocumentTitle title={this.getPageTitle()}>
            <div className={styles.container} style={{backgroundImage: 'url(/public/entry_bg.jpg)'}}>
              <div className={styles.lang}>
                <SelectLang />
              </div>
              <div className={styles.content}>
                <QueueAnim
                  key="QueueAnim"
                  type={['bottom', 'top']}
                  delay={500}
                  className={styles.top}
                >
                  <div className={styles.header} key="title">
                    <Link to="/">
                      <img alt="logo" className={classNames(styles.logo, 'App-logo')} src={LOGO} />
                      <span className={styles.title}>{TITLE}</span>
                    </Link>
                  </div>
                  <div className={styles.desc} key="subtitle"><Texty type="mask-bottom">欢迎来到幸运草小程序后台管理系统</Texty></div>
                  <article key="content">
                    {children}
                  </article>
                </QueueAnim>
              </div>
              <GlobalFooter links={links} copyright={COPYRIGHT} className={styles.globalFooter} />
            </div>
          </DocumentTitle>
        </CSSTransition>
      </TransitionGroup>
    );
  }
}

export default UserLayout;